<template>
	<view id="Box">
		<view class="status_bar">
			<image src="../../../static/goback.png" class="back" @click="back"></image>
			<view>充值</view>
			<image src="../../../static/img/parents/studydetail.png" class="studydetail"></image>
			<text>学时明细</text>
		</view>

		<view class="right">
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view class="radio">
							<radio :value="item.value" :checked="index === current" />
						</view>

						<view class="box1">
							<view class="detail ">
								<view class="left">
									<view class="studytime">{{item.time}}<text class="classtime">学时</text></view>
									<text class="msg">提示：预计足够{{item.msg}}学期使用</text>
									<view class="Company">￥<text class="money">{{item.money}}</text>元</view>
								</view>
							</view>
							<view style="clear: both;"></view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="Recharge"><text>确认充值</text></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: -1,
				items: [
					{
						time: '100',
						msg: '1',
						money:'1000'
					},
					{
						time: '200',
						msg: '2',
						money:'2000'
					},
					{
						time: '300',
						msg: '3',
						money:'3000'
					},
				]
			}
		},
		methods: {
			//单选框
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},

			
		}
	}
</script>

<style lang="less" scoped>
	
	#Box {
		width: 100%;
		height: 100%;
		background-color: #fafafa;
	}

	.status_bar {
		height: 128rpx;
		width: 100%;
		background-color: white;
		display: flex;
		justify-content: left;

		.back {
			width: 26rpx;
			height: 36rpx;
			margin-top: 66rpx;
			margin-left: 20rpx;
		}

		view {
			font-size: 36rpx;
			margin-top: 58rpx;
			margin-left: 30rpx;
		}

		.studydetail {
			width: 26rpx;
			height: 26rpx;
			margin-left: 250rpx;
			margin-top: 70rpx;
		}

		text {
			font-size: 30rpx;
			margin-top: 60rpx;
		}

	}


	

	.right {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.radio {
			margin-right: 80rpx;

			radio {
				float: right;
				margin-top: 100rpx;
				transform:scale(1.3);
			}
		}

		.box1 {
			margin-left: 30rpx;
			background-color: white;

			.detail {
				width: 690rpx;
				height: 250rpx;
				margin-top: 34rpx;
				border-radius: 15rpx;
				background-image: url(../../../static/img/01.3356375.png);
				background-size: 100% 100%;

				.left {
					color: white;
					overflow: hidden;

					.studytime {
						margin-left: 26rpx;
						font-size: 34rpx;
						margin-top: 38rpx;
						font-weight: bolder;

						.classtime {
							font-size: 24rpx;
							font-weight: normal;
						}
					}

					.msg {
						margin-left: 26rpx;
						font-size: 28rpx;
						margin-top: 20rpx;
					}

					.Company {
						margin-left: 26rpx;
						font-size: 24rpx;
						margin-top: 60rpx;

						.money {
							font-size: 34rpx;
							font-weight: bolder;
						}
					}
				}

			}

		}
	}




	//确认重置按钮
	.Recharge {
		width: 228rpx;
		height: 70rpx;
		background-color: #2eb3fe;
		border-radius: 15rpx;
		color: white;
		margin-top: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bolder;
		margin-left: 262rpx;


	}
</style>
